<template lang="">
  <div>
    <div
      :id="id"
      :style="{
        width,
        height
      }"
    ></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: {
    id: {
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: "400px"
    },
    height: {
      type: String,
      default: "400px"
    },
    indicator: {
      type: Array,
      default: () => []
    },
    originData: {
      type: Array,
      default: () => []
    },
    contrasData: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    // 格式化秒为分钟
    formatTime() {
      return (value) => {
        const minutes = value / 60;
        const formattedMinutes = minutes.toFixed(2);
        const roundedMinutes = Math.ceil(formattedMinutes * 100) / 100;
        return roundedMinutes;
      };
    }
  },
  methods: {
    init() {
      const options = {
        color: ["#FEA900", "#22D7FF"],
        legend: {
          orient: "vertical",
          show: true,
          right: 50,
          center: 0,
          textStyle: {
            fontSize: 14,
            color: "#000"
          },
          data: ["课堂一", "课堂二"]
        },
        tooltip: {
          trigger: "item"
          // formatter: (params) => {
          //   console.info(params);
          //   return `${this.$props.indicator[0].text}:${this.formatTime(params.data.value[0])} <br/>
          //   ${this.$props.indicator[1].text}:${this.formatTime(params.data.value[1])} <br/>
          //   ${this.$props.indicator[2].text}:${this.formatTime(params.data.value[2])} <br/>
          //   ${this.$props.indicator[3].text}:${this.formatTime(params.data.value[3])} <br/>`;
          // }
        },
        radar: [
          {
            indicator: this.$props.indicator,
            center: ["50%", "50%"],
            radius: 142,
            startAngle: 90,
            splitNumber: 3,
            orient: "horizontal", // 图例列表的布局朝向,默认'horizontal'为横向,'vertical'为纵向.
            name: {
              formatter: "{value}",
              textStyle: {
                fontSize: 14, //外圈标签字体大小
                color: "#000" //外圈标签字体颜色
              }
            },
            splitArea: {
              // 坐标轴在 grid 区域中的分隔区域，默认不显示。
              show: true,
              areaStyle: {
                // 分隔区域的样式设置。
                color: ["transparent", "transparent"] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
              }
            },
            axisLine: {
              //指向外圈文本的分隔线样式
              lineStyle: {
                color: "#ccc"
              }
            },
            splitLine: {
              lineStyle: {
                color: "#ccc", // 分隔线颜色
                width: 1 // 分隔线线宽
              }
            }
          }
        ],
        series: [
          {
            name: "教师行为分析",
            type: "radar",
            itemStyle: {
              emphasis: {
                lineStyle: {
                  width: 4
                }
              }
            },
            data: [
              {
                name: "课堂一",
                value: this.$props.originData,
                symbolSize: 0, // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
                areaStyle: {
                  normal: {
                    // 单项区域填充样式
                    color: "#FEA900"
                  }
                }
              },
              {
                name: "课堂二",
                value: this.$props.contrasData,
                symbolSize: 0,
                areaStyle: {
                  normal: {
                    color: "#22D7FF"
                  }
                }
              }
            ]
          }
        ]
      };
      const dom = document.getElementById(this.$props.id);
      const radarChart = echarts.init(dom);
      radarChart.setOption(options);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  }
};
</script>
